<template>
    <div>
        <div class="mx-4 my-8 text-2xl">文章评论管理</div>
        <div class="m-4">
            <avue-crud
                ref="crudRef"
                :option="option"
                :data="data"
                v-model:page="page"
                @row-save="rowSave"
                @row-update="rowUpdate"
                @row-del="rowDel"
                @search-change="searchChange"
                @search-reset="resetChange"
                @refresh-change="refreshChange"
                @size-change="sizeChange"
                @current-change="currentChange"
            >
            </avue-crud>
        </div>
    </div>
</template>

<script setup lang="ts">
import { add, DBKeys, del, getList, update } from '@/apis/commonCrud'
import type { AvueCrudOption } from '@smallwei/avue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import { commentsColumn } from './column'

const page = ref({
    total: 10,
    currentPage: 1,
    pageSize: 10,
})
const option = ref<AvueCrudOption>({
    index: true,
    // editBtn: false,
    addBtn: false,
    column: commentsColumn,
})
const data = ref([])
const searchParams = ref({
    page: 1,
    pageSize: 10,
})

const dbName: DBKeys = 'articleComments'

const getData = async (sParams = searchParams.value) => {
    const res = await getList(
        dbName,
        {
            ...sParams,
        },
        [
            { model: 'users', attributes: ['id', 'nickname'], as: 'user' },
            { model: 'articles', attributes: ['id', 'title'], as: 'article' },
        ]
    )
    if (!res.success) {
        ElMessage.error('获取数据失败')
        return
    }
    data.value = res.data.rows
    page.value.total = res.data.count
}

getData()

const rowSave = async (form, done, loading) => {
    const res = await add(dbName, form)
    loading()
    if (!res.success) {
        ElMessage.error('添加失败')
        return
    }
    ElMessage.success('添加成功')
    await getData()
    done()
}

const rowDel = async (row, _index, done) => {
    const confirm = await ElMessageBox.confirm('确定要删除吗？')

    if (confirm !== 'confirm') {
        done()
        return
    }

    const res = await del(dbName, row.id)
    if (!res.success) {
        ElMessage.error('删除失败')
        return
    }
    ElMessage.success('删除成功')
    await getData()
    done()
}

const rowUpdate = async (form, _index, done, loading) => {
    const res = await update(dbName, form.id, {
        title: form.title,
        content: form.content,
    })
    if (!res.success) {
        ElMessage.error('修改失败')
        return
    }
    loading()
    ElMessage.success('修改成功')
    await getData()
    done()
}

const resetChange = () => {
    const newSearchParams = {
        page: 1,
        pageSize: page.value.pageSize,
    }
    searchParams.value = newSearchParams
}

const searchChange = async (params, done) => {
    const newSearchParams = {
        page: 1,
        pageSize: page.value.pageSize,
        ...params,
    }
    searchParams.value = newSearchParams
    await getData(newSearchParams)
    done()
}
const refreshChange = () => {
    getData()
}

const sizeChange = (val) => {
    page.value.pageSize = val
    const newSearchParams = {
        page: 1,
        pageSize: val,
    }
    searchParams.value = newSearchParams
    getData(newSearchParams)
}

const currentChange = (val) => {
    page.value.currentPage = val
    const newSearchParams = {
        ...searchParams.value,
        page: val,
        pageSize: page.value.pageSize,
    }
    searchParams.value = newSearchParams
    getData(newSearchParams)
}
</script>

<style scoped></style>
